<template>
  <view class="title">
    <text>轻影证件照制作</text>
  </view>
  <view class="content">
    <view class="item" v-for="(item,index) in content" :key="index" @click="switchTab(item)">
      <image :src="item.icon"/>
      <text>{{ item.name }}</text>
      <text>{{ item.english }}</text>
    </view>
  </view>
</template>

<script setup>
import {ref} from 'vue'
import photograph from '@/static/image/photograph.png'
import up from '@/static/image/upfile.png'
import specification from '@/static/image/specification.png'
import color from '@/static/image/color.png'

const photoPath = ref('')
const content = ref([
  {
    icon: photograph,
    name: '拍照制作',
    english: 'Take photos',
    path: '/pages/position/index',
    index: 0
  },
  {
    icon: up,
    name: '上传照片',
    english: 'upfile photos',
    index: 1
  },
  {
    icon: specification,
    name: '证件照规格',
    english: 'Specifications',
    index: 2
  },
  {
    icon: color,
    name: '智能换底色',
    english: 'Change background',
    index: 3
  }
])


const switchTab = (item) => {
  if (item?.index === 1) {
    uni.chooseImage({
      count: 1, // 最多选择图片数量
      sizeType: ['original', 'compressed'], // 可以选择原图或压缩图
      sourceType: ['album'], // 只从相册选择，如果想拍照可加 'camera'
      success: function (res) {
        console.log('选择的图片信息:', res);
        const tempFilePaths = res.tempFilePaths; // 临时文件路径数组
        // 如果你要展示在 <image> 里：
        // this.imageSrc = tempFilePaths[0];
        photoPath.value = tempFilePaths[0]
        uni.navigateTo({
          url: '/pages/position/edit?data=' + photoPath.value
        })
      },
      fail: function (err) {
        uni.showToast({
          title: '用户未选择',
          icon: 'none'
        })
        console.log('选择失败:', err);
      }
    })
  } else {
    uni.navigateTo({
      url: item.path
    })
  }
}
</script>

<style scoped lang="scss">
.title {
  //border: 1px solid red;
  width: 100%;
  height: 150rpx;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  font-size: 35rpx;
  color: white;
}

.content {
  //border: 1px solid red;
  width: 100%;
  height: calc(100% - 150rpx - 120rpx);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  place-items: center;
  padding-top: 15rpx;
  overflow-y: scroll;
  overflow-x: hidden;


  .item {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border: 1px solid rgba(255, 255, 255, 0.56);
    width: 320rpx;
    height: 250rpx;
    margin: 18rpx;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(12px);
    border-radius: 20rpx;
    box-shadow: 15rpx 10rpx 15rpx 2px rgba(0, 0, 0, 0.25);
    padding: 30rpx;
    color: white;
    font-size: 25rpx;

    image {
      width: 50rpx;
      height: 50rpx;
      margin: 15rpx 0;
    }

    text {
      margin: 5rpx 0;
    }
  }
}
</style>